<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" type="image/x-icon"
	href="${ctxPath}/static/images/lukk.ico" media="screen" />
<link rel="icon" href="${ctxPath}/static/images/lukk.ico"
	type="image/x-icon" />
<link rel="bookmark" href="${ctxPath}/static/images/lukk.ico"
	type="image/x-icon" />

<title>管理页面</title>
</head>
<body class="sticky-header"
	onload="indexmenu('${oneMenu}','${twoMenu}');">
	<%@ include file="../index/index.jsp"%>
	<section>
		<div class="main-content" style="overflow-y: auto">
			<!-- 地址栏-->
			<div class="page-heading">
				<h3>鹿客帮</h3>
				<ul class="breadcrumb">
					<li><a>审核管理 </a></li>
					<li class="active">已通过师傅</li>
				</ul>
			</div>
			<div class="panel-body" style="padding-bottom: 0px;">
				<div class="panel panel-default">
					<div class="panel-heading">查询条件</div>
					<div class="panel-body" style="height: 65px">
						<form id="formSearch" class="form-horizontal">
							<input type="hidden" id="queryForm" value="disable">
							<div class="form-group" style="">
								<div class="form-inline col-md-2">
									名称：<input type="text" class="form-control"
										id="txt_search_workerName">
								</div>
								<div class="form-inline col-md-2">
									手机：<input type="text" class="form-control"
										id="txt_search_phoneNumber">
								</div>
								<div class="form-inline col-md-3">
									省份： <select id="allocatedProvinceSelect" name=""
										data-width="220px" class="selectpicker show-tick form-control"
										data-live-search="false">
									</select>
								</div>
								<div class="form-inline col-md-3" id="workerStatusDiv">
									账号状态：<label> <input type="radio" name="optionsRadios"
										onchange="changeQueryForm(this)" id="disable" value="0"
										checked> 使用中&nbsp;&nbsp;&nbsp;
									</label><label> <input type="radio" name="optionsRadios"
										onchange="changeQueryForm(this)" id="disable" value="1">
										停用&nbsp;&nbsp;&nbsp;
									</label><label> <input type="radio" name="optionsRadios"
										onchange="changeQueryForm(this)" id="workerStatus" value="2">
										未通过&nbsp;&nbsp;&nbsp;
									</label>
								</div>
								<div class="form-inline col-md-1" style="text-align: left;">
									<button type="button" style="margin-left: 50px" id="btn_query"
										class="btn btn-primary">查询</button>
								</div>
							</div>
						</form>
					</div>
				</div>
				<div id="toolbar" class="btn-group">
					<button type="button"
						onclick="javascript:$('#sendMessageModal').modal('show');"
						class="btn btn-default">
						<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>群发短信
					</button>
					<label> &nbsp;&nbsp;&nbsp;&nbsp;注释：停用和正在使用只针对已通过的用户。</label>
				</div>
				<table id="tb_worker"></table>
			</div>

		</div>
	</section>
	<!--  查看详细modal  -->
	<div class="modal fade" style="top: 100px;" id="viewWorkerDetialModal"
		tabindex="-1" role="dialog"
		aria-labelledby="viewWorkerDetialModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="viewWorkerDetialModalLabel">查看师傅的详细信息</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="modifyPotentialWorkerForm"
						role="form">
						<input type="hidden" name="id" id="txt_workerID">
						<div class="form-group">
							<label for="txt_workerName" class="col-md-2 control-label">师傅名称</label>
							<div class="col-md-10">
								<input type="text" class="form-control" id="txt_workerName">
							</div>
						</div>
						<div class="form-group">
							<label for="txt_phoneNumber" class="col-md-2 control-label">师傅手机</label>
							<div class="col-md-10">
								<input type="text" class="form-control" id="txt_phoneNumber">
							</div>
						</div>
						<div class="form-group">
							<label for="txt_phoneNumber" class="col-md-2 control-label">绑定银行</label>
							<div class="col-md-10">
								<input type="text" class="form-control" id="txt_boundBank">
							</div>
						</div>
						<div class="form-group">
							<label for="txt_phoneNumber" class="col-md-2 control-label">银行卡号</label>
							<div class="col-md-10">
								<input type="text" class="form-control" id="txt_boundNumber">
							</div>
						</div>
						<div class="form-group">
							<label for="txt_phoneNumber" class="col-md-2 control-label">上传头像</label>
							<div class="col-md-10">
								<img src="" id="workerImg" alt="Cinque Terre">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal" >关闭
					</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<div class="modal fade" style="top: 100px;" id="sendMessageModal"
		tabindex="-1" role="dialog" aria-labelledby="sendMessageModalLabel"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="sendMessageModalLabel">发送短信的模板</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="modifyPotentialWorkerForm"
						role="form">
						<input type="hidden" name="id" id="txt_workerID">
						<div class="form-group">
							<label for="txt_reason" class="col-sm-3 control-label">短信模板：</label>
							<div class="col-sm-9">
								<select class="form-control selectpicker" id="sendMessageTitle"
									onchange="verifySelectChange(this)">
									<option value='0'>近期上线，敬请关注</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="txt_phoneNumber" class="col-sm-3 control-label">发送信息：</label>
							<div class="col-sm-9">
								<textarea class="form-control" id="sendMessageTextArea" rows="5">鹿客帮已全国上线运营，师傅们准备开始接单赚钱吧！加入鹿客帮：http://fir.im/ew6r。回TD退订</textarea>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" onclick="sendMessageToWorkers()"
						class="btn btn-primary">确认发送</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- 权限分配模态框开始 -->
	<div class="modal fade" style="top: 100px;" id="allocateReduceModal"
		tabindex="-1" role="dialog"
		aria-labelledby="allocateReduceModalModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="allocateReduceModalModalLabel">该用户不可执行操作（可多选）</h4>
				</div>
				<div class="modal-body"  style="height: 160px">
					<form class="form-horizontal" role="form" id="workerRightStatus" >
						<input type="hidden" name="workerID" id="txt_workerID">
						<div class="form-group">
							<label for="txt_reason" class="col-sm-3 control-label">操作选择</label>
							<div class="col-sm-9">
								<select id="allocateReduceSelect" name="allocateReduce"
									class="selectpicker show-tick form-control" multiple
									data-live-search="false"> 
									<option value='0'>查看可接订单</option>
									<option value='1'>新订单推送</option>
									<option value='2'>取消已接订单（不会进行扣费）</option>
									<option value='3'>操作钱包</option>									
								</select>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" onclick="verifyWorkerNotThroughSubmit();"
						class="btn btn-primary">确认拒绝</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>
<!-- tables插件的引用 -->
<script src="${ctxPath}/static/js/bootstrap-table/bootstrap-table.js"></script>
<link href="${ctxPath}/static/js/bootstrap-table/bootstrap-table.css"
	rel="stylesheet" />
<script
	src="${ctxPath}/static/js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="${ctxPath}/static/js/bootstrap-select/css/bootstrap-select.min.css">

<script
	src="${ctxPath}/static/js/bootstrap-select/js/bootstrap-select.min.js"></script>

<script type="text/javascript">
	//查看待审核员工详细信息
	function viewWorkerDetialModalOpen(id) {
		var viewRow = $('#tb_worker').bootstrapTable('getRowByUniqueId', id);
		$("#txt_workerName").val(viewRow.name);
		$("#txt_phoneNumber").val(viewRow.phone);
		$("#txt_boundBank").val(viewRow.boundBank);
		$("#txt_boundNumber").val(viewRow.boundNumber);
		$("#workerImg").attr(
				"src",
				"http://okwc9gyzs.bkt.clouddn.com/" + viewRow.headImg
						+ "?imageView2/1/w/400/h/300");
		$('#viewWorkerDetialModal').modal('show');
	}
	var TableInit = function() {
		var oTableInit = new Object();
		//初始化Table
		oTableInit.Init = function() {
			$('#tb_worker')
					.bootstrapTable(
							{
								url : '${ctxPath}/worker/queryByProvinceAndStatus', //请求后台的URL（*）
								method : 'post', //请求方式（*）
								toolbar : '#toolbar', //工具按钮用哪个容器
								striped : true, //是否显示行间隔色
								cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
								pagination : true, //是否显示分页（*）
								sortable : false, //是否启用排序
								sortName : 'workerSpace',
								sortOrder : "desc", //排序方式
								queryParams : oTableInit.queryParams,//传递参数（*）
								sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
								pageNumber : 1, //初始化加载第一页，默认第一页
								pageSize : 10, //每页的记录行数（*）
								pageList : [ 10, 25, 50, 100 ],
								search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
								strictSearch : false,
								showColumns : false, //是否显示所有的列
								showRefresh : true, //是否显示刷新按钮
								minimumCountColumns : 2, //最少允许的列数
								clickToSelect : false, //是否启用点击选中行
								height : 600, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
								uniqueId : "workerId", //每一行的唯一标识，一般为主键列
								showToggle : true, //是否显示详细视图和列表视图的切换按钮
								cardView : false, //是否显示详细视图
								detailView : false, //是否显示父子表
								contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
								columns : [
										{
											checkbox : true,
											width : '5%'
										},
										{
											field : 'name',
											title : '师傅信息',
											width : '8%',
											align : "center",
											formatter : function(value, row,
													index) {
												return value + "<br/>("
														+ row.phone + ")"

											}
										},
										{
											field : 'workerSpace',
											title : '工作区市',
											width : '15%'
										},
										{
											field : 'registerDate',
											title : '注册时间',
											width : '10%'
										},
										{
											field : 'isDisable',
											title : '账号状态',
											width : '10%',
											formatter : function(value, row,
													index) {
												if (value == 1
														&& row.status == 1) {
													return "<font color='red'>已经停用</font>";
												} else if (value == 0
														&& row.status == 1) {
													return "<font color='green'>使用中</font>";
												} else if (row.status == 2) {
													return "<font color='red'>未通过</font>";
												} else {
													return "<font color='green'>什么情况</font>";
												}
											}
										},
										{
											field : 'age',
											title : '工龄',
											width : '8%'
										},
										{
											field : 'tag',
											title : '查看详细信息',
											width : '10%',
											formatter : function(value, row,
													index) {
												return "<button class='btn btn-info btn-xs' onclick='javascript:viewWorkerDetialModalOpen("
														+ row.workerId
														+ ")'>查看详细信息</button>";
											}
										},
										{
											field : 'tag2',
											title : '停用操作',
											width : '15%',
											formatter : function(value, row,
													index) {
												return "<button class='btn btn-success btn-xs' onclick='javascript:enabledWorker("
														+ row.workerId
														+ ")'>启用账号</button>&nbsp;&nbsp;&nbsp;<button class='btn btn-danger btn-xs' onclick='javascript:disabledWorker("
														+ row.workerId
														+ ")'>停用账号</button>";
											}
										},
										{
											field : 'tag3',
											title : '操作分配',
											width : '15%',
											formatter : function(value, row,
													index) {
												return "<button class='btn btn-success btn-xs' onclick='javascript:allocateReduce("
														+ row.workerId
														+ ")'>分配权限</button>";
											}
										}, ]
							});
		};

		//得到查询的参数
		oTableInit.queryParams = function(params) {
			var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
				limit : params.limit, //页面大小
				offset : params.offset, //页码
				order : params.order,
				sort : params.sort,
				workerName : $('#txt_search_workerName').val(),
				provinceCode : $('#allocatedProvinceSelect').val(),
				phoneNumber : $('#txt_search_phoneNumber').val(),
				typeValue : $('#workerStatusDiv input:radio:checked').val(),
				//有两种  一种是根据worker表中的  status查询  一种是根据worker表中的disable   传往后台的参数 一个为disabled 一个为1  status
				queryType : $('#queryForm').val()
			};
			return temp;
		};
		return oTableInit;
	};
	//审核通过
	function disabledWorker(id) {
		Ewin.confirm({
			message : "你确定要冻结他的账号吗？"
		}).on(function(e) {
			if (!e) {
				return;
			} else {
				$.post('${ctxPath}/worker/updateWorkerDisabledStatus', {
					workerId : id,
					isDisable : 1
				}, function(data) {
					toastr.success('已经更改成功！');
					$("#tb_worker").bootstrapTable('refresh');
				});
			}
		});
	}
	function enabledWorker(id) {
		Ewin.confirm({
			message : "你确定要启用他的账户吗？"
		}).on(function(e) {
			if (!e) {
				return;
			} else {
				$.post('${ctxPath}/worker/updateWorkerDisabledStatus', {
					workerId : id,
					isDisable : 0
				}, function(data) {
					toastr.success('已经更改成功！');
					$("#tb_worker").bootstrapTable('refresh');
				});
			}
		});
	}
	function changeQueryForm(optionRadio) {
		$('#queryForm').val($(optionRadio).attr('id'));
	}
	$(function() {
		$.post('${ctxPath}/province/queryAllocatedProvinces', function(data) {
			$("#allocatedProvinceSelect").append(
					"<option value='0'>全部省份" + "</option>");
			$(data).each(
					function(index, currData) {
						$("#allocatedProvinceSelect").append(
								"<option value="+currData.areaCode+">"
										+ currData.name + "</option>");
					});
			$('#allocatedProvinceSelect').selectpicker('refresh');
			//1.初始化Table
			var oTable = new TableInit();
			oTable.Init();
			$("#btn_query").click(function() {
				var opt = {
					pageNumber : 1,
					query : {
						offset : 0
					}
				};
				//从新开始计数
				$("#tb_worker").bootstrapTable('refresh', opt);
			});
		});
	});
	//给选中工人发送短信
	function sendMessageToWorkers() {
		Ewin.confirm({
			message : "你确定要给他们发送短信吗？"
		}).on(
				function(e) {
					if (!e) {
						return;
					} else {
						var arrselections = $("#tb_worker").bootstrapTable(
								'getSelections');
						if (arrselections.length > 0) {
							$.post('${ctxPath}/worker/sendMessage', {
								workers : getALLCheckedCheckboxs()
							}, function(data) {
								if (data) {
									toastr.success("已经给选择人员发送了！");
									$('#sendMessageModal').modal('hide');
								}
							});
						} else {
							toastr.error("请选择有效数据！");
						}
					}
				});
	}
	//获取所有的选中的checkbox
	function getALLCheckedCheckboxs(){
		var arrselections = $("#tb_worker").bootstrapTable('getSelections');
		//获取所有的状态
		var alreayCheckboxs = "";
		$(arrselections).each(function(i) {
			alreayCheckboxs += ("," + this.workerId);
		});
		return alreayCheckboxs.substring(1);
	}
	//权限分配操作
	function allocateReduce(workerID) {
		refreshOption();
		$("#txt_workerID").val(workerID);	
		$.post('${ctxPath}/worker/queryAllocatedReduce', {
			workerID : workerID
		},function(data) {
			$.each(data,function (i,option){
					if(option==1){			
						$($("#allocateReduceSelect option")[i]).attr('selected','selected');
					}												
			});						
			$('#allocateReduceSelect').selectpicker('refresh');//下拉框			
			$("#allocateReduceModal").modal('show');
		});		
	}
	//更新工人权限状态
	function verifyWorkerNotThroughSubmit() {
		var workerId=$("#txt_workerID").val();
		var opt=$("#allocateReduceSelect  option:selected");
		var canGetIndent=0;
		var newIndentPush=0;
		var hasGetIndent=0;
		var operateWallet=0;
		$.each(opt,function (i,option){			
			if($(option).val()==0){					
				canGetIndent=1;			
			}
			if($(option).val()==1){
				newIndentPush=1;
			}
			if($(option).val()==2){
				hasGetIndent=1;
			}
			if($(option).val()==3){
				operateWallet=1;
			}
		});
		$.post('${ctxPath}/worker/updateWorkerRightStatus', {
			workerId : workerId,
			canGetIndent : canGetIndent,
			newIndentPush : newIndentPush,
			hasGetIndent : hasGetIndent,
			operateWallet : operateWallet
		});		
		$("#allocateReduceModal").modal('hide');
	}
	function refreshOption() {
		var opts = $("#allocateReduceSelect option");
		$.each(opts, function(i, option) {
			$($("#allocateReduceSelect option")[i]).removeAttr('selected');
		});
	}	
</script>
<script src="${ctxPath}/static/js/jquery.nicescroll.js"></script>
</html>
